{% extends "../base_public.html" %}

{% block content %}
<div class="container-fluid" style="width:90%;padding-left: 180px;">
<form method="GET" action="/ansible/opt_task/">{% csrf_token %}

<div class="row">
    <div class="col-sm-6">
    <div class="form-group">
        <label for="exampleInputEmail1">组列表</label>
        <!-- <input type="text" class="form-control" name="groupName" placeholder="组列表"> -->
        <select name="groupName" class="form-control">
            <option value="None">选择一个组</option>
            {% for g in groups %}
            <option>
                {{ g.nickName|default:g.groupName }}&nbsp;<------>&nbsp;{{ g.groupName }}
              </option>
            {% endfor %}
        </select>
      </div>
      </div>
      <div class="col-sm-6">
          <div class="form-group">
              <label for="exampleInputPassword1">任务组</label>
              <select class="form-control" name="module">
                  <option value="None">选择一个模块</option>
                {% for m,n in ansible_modules.items %}
                <option value="{{m}}">
                  {{ n.describe|default:m }}
                </option>
                {% endfor %}
              </select>
            </div>
</div>
</div>
  <div class="form-group">
    <label for="exampleInputPassword1">参数</label>
    <textarea type="text" class="form-control" name="vars" placeholder="参数"rows=9></textarea>
  </div>

  <button type="submit" class="btn btn-default">提交</button>
</form>
</div>

<script type="text/javascript">
$("select[name='module']").change(function(){
  module_name = this.selectedOptions[0].value
  $.ajax({
    url: "/ansible/get_modules/"+module_name,
    success: function(msg){
      data = {}
      v = ""
      $.each(msg.parameter, function(a,b){
        data[b] = ""
        v += '"'+b+'": "",\n'
      })
      console.log(data)
      $('textarea')[0].value = v
      $('pre')[0].innerHTML = syntaxHighlight(data)
    }
  })
});

</script>
{% endblock %}
